<style scoped>
  .echarts {
    width: calc(100vw - 320px);
    height: calc(100vh - 40px);
    margin-left: auto;
    margin-right: auto;
  }

  .el-main {
    margin-left: 0;
    padding: 0;
    height: calc(100vh - 40px);
  }

</style>
<template>
  <el-main>
    <div class='echarts' ref='indoor'></div>
  </el-main>
</template>
<script>
  export default {
    data() {
      return {
        sets:{
          humidityMax:0,
          humidityMin:0,
          humidityUnit:'',
          tempMax:0,
          tempMin:0,
          tempUnit:'',
          phoMax:0,
          phoMin:0,
          phoUnit:'',
          lightMax:0,
          lightMin:0,
          lightUnit:'',
          co2Max:0,
          co2Min:0,
          co2Unit:'',
          maxRecord:0
        },
        data: {
          createTimes:[],
          indoorco2:[],
          indoorhumidity:[],
          indoorlight:[],
          indoorphotosynthetic:[],
          indoortemp:[]
        },
        option: {
          title: {
            text: '室内环境'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['室内CO2', '室内湿度', '室内光照','室内光合','室内温度']
          },
          toolbox: {
            show: true,
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              dataView: {readOnly: true},
              magicType: {type: ['line', 'bar']},
              restore: {},
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value}'
            }
          },
          series: [{
            name: '室内CO2',
            type: 'line',
            data: [],
            markLine: {
              data: [
                {name: 'CO2上限', yAxis: 0},
                {name: 'CO2下限', yAxis: 0}
              ]
            }
          },
            {
              name: '室内湿度',
              type: 'line',
              data: [],
              markLine: {
                data: [
                  {name: '湿度上限', yAxis: 0},
                  {name: '湿度下限', yAxis: 0}
                ]
              }
            },
            {
              name: '室内光照',
              type: 'line',
              data: [],
              markLine: {
                data: [
                  {name: '光照上限', yAxis: 0},
                  {name: '光照下限', yAxis: 0}
                ]
              }
            },
            {
              name: '室内光合',
              type: 'line',
              data: [],
              markLine: {
                data: [
                  {name: '光合上限', yAxis: 0},
                  {name: '光合下限', yAxis: 0}
                ]
              }
            },
            {
              name: '室内温度',
              type: 'line',
              data: [],
              markLine: {
                data: [
                  {name: '温度上限', yAxis: 0},
                  {name: '温度下限', yAxis: 0}
                ]
              }
            }
          ]
        }
      }
    },
    mounted() {
      const that = this;
      let temp;
      //获取后台设置的参数
      this.$http.get(that.$url + 'getParameters')
        .then(function (response) {
          temp = response.data;
          that.sets.maxRecord = temp.maxrecord;
          const parametersLen = temp.parameters.length;
          for(let i = 0;i < parametersLen;i++){
            switch(temp.parameters[i].id){
              case 'indoorco2':
                that.sets.co2Max = temp.parameters[i].max;
                that.sets.co2Min = temp.parameters[i].min;
                that.sets.co2Unit = temp.parameters[i].unit;
                break;
              case 'indoorhumidity':
                that.sets.humidityMax = temp.parameters[i].max;
                that.sets.humidityMin = temp.parameters[i].min;
                that.sets.humidityUnit = temp.parameters[i].unit;
                break;
              case 'indoorlight':
                that.sets.lightMax = temp.parameters[i].max;
                that.sets.lightMin = temp.parameters[i].min;
                that.sets.lightUnit = temp.parameters[i].unit;
                break;  
              case 'indoorphotosynthetic':
                that.sets.phoMax = temp.parameters[i].max;
                that.sets.phoMin = temp.parameters[i].min;
                that.sets.phoUnit = temp.parameters[i].unit;
                break;
              case 'indoortemp':
                that.sets.tempMax = temp.parameters[i].max;
                that.sets.tempMin = temp.parameters[i].min;
                that.sets.tempUnit = temp.parameters[i].unit;
                break;
            }
          }

          console.log(that.sets);
          //获取数据
        that.$http.get(that.$url + 'getRecentDayData')
          .then(function (response) {
            that.data.createTimes = response.data.createTimes;
            that.data.indoorco2 = response.data.indoorCo2s;
            that.data.indoorhumidity = response.data.indoorHumiditys;
            that.data.indoorlight = response.data.indoorLights;
            that.data.indoorphotosynthetic = response.data.indoorPhotosynthetics;
            that.data.indoortemp = response.data.indoorTemps;

            //设置数据
            //x轴
            console.log(that.data);
          that.option.xAxis.data.push(...that.data.createTimes.slice(0,that.sets.maxRecord));
          that.data.createTimes.splice(0,that.sets.maxRecord);
          //co2
          that.option.series[0].data.push(...that.data.indoorco2.slice(0,that.sets.maxRecord));
          that.data.indoorco2.splice(0,that.sets.maxRecord);
          that.option.series[0].markLine.data[0].yAxis = that.sets.co2Max;
          that.option.series[0].markLine.data[1].yAxis = that.sets.co2Min;

          
          //湿度
          that.option.series[1].data.push(...that.data.indoorhumidity.slice(0,that.sets.maxRecord));
          that.data.indoorhumidity.splice(0,that.sets.maxRecord);
          that.option.series[1].markLine.data[0].yAxis = that.sets.humidityMax;
          that.option.series[1].markLine.data[1].yAxis = that.sets.humidityMin;


          //光照
          that.option.series[2].data.push(...that.data.indoorlight.slice(0,that.sets.maxRecord));
          that.data.indoorlight.splice(0,that.sets.maxRecord);
          that.option.series[2].markLine.data[0].yAxis = that.sets.lightMax;
          that.option.series[2].markLine.data[1].yAxis = that.sets.lightMin;
          //光合
          that.option.series[3].data.push(...that.data.indoorphotosynthetic.slice(0,that.sets.maxRecord));
          that.data.indoorphotosynthetic.splice(0,that.sets.maxRecord);
          that.option.series[3].markLine.data[0].yAxis = that.sets.phoMax;
          that.option.series[3].markLine.data[1].yAxis = that.sets.phoMin;
          //温度
          that.option.series[4].data.push(...that.data.indoortemp.slice(0,that.sets.maxRecord));
          that.data.indoortemp.splice(0,that.sets.maxRecord);
          that.option.series[4].markLine.data[0].yAxis = that.sets.tempMax;
          that.option.series[4].markLine.data[1].yAxis = that.sets.tempMin;
          let myChart = that.$echarts.init(that.$refs.indoor);
          myChart.setOption(that.option);
          
          
          setInterval(function () {
            if (that.option.xAxis.data.length > that.sets.maxRecord) {
              that.option.xAxis.data.splice(0, that.option.xAxis.data.length - that.sets.maxRecord);
              for(let i = 0;i<5;i++){
                that.option.series[i].data.splice(0, that.option.series[i].data.length - that.sets.maxRecord);
              }
            }
            that.option.xAxis.data.push(that.data.createTimes.shift());
            that.option.series[0].data.push(that.data.indoorco2.shift());
            that.option.series[1].data.push(that.data.indoorhumidity.shift());
            that.option.series[2].data.push(that.data.indoorlight.shift());
            that.option.series[3].data.push(that.data.indoorphotosynthetic.shift());
            that.option.series[4].data.push(that.data.indoortemp.shift());

            myChart.setOption(that.option);
          }, 1000);
          
          })
          .catch(function (error) {
            console.log(error);
            that.$message({
              message: '获取数据失败',
              type: 'error'
            });
          });

        })
        .catch(function (error) {
          that.$message({
            message: '获取数据失败',
            type: 'error'
          });
        });
    },
    methods: {
      updataData() {

      }
    }
  }

</script>
